<template>
    <div>
        <nav-com title="实名认证" :showView='showView' @back="backHandler()"></nav-com>
       
        <div class="real_box">
            <div class="real_text">
                为保证资金安全到帐，请用您本人身份信息进行认证校验
            </div>
            <div class="real_title title_height">
                身份证正面
            </div>
            <div class="real_ps">
                <van-uploader style="width:89vw; height:40vw;" v-model="fileList" multiple :before-delete="beforeDel" :after-read='afterRead'>
                    <div :style="{'display':styledisplay}" class="real_photo_btn">
                        <img src="../../assets/p1.png" />
                        <p>上传身份证正面</p>
                        <p>3M以内</p>
                    </div>
                </van-uploader>
                
            </div>
            <div class="real_title title_height margin_t">
                身份证背面
            </div>
            <div class="real_ps">
                <van-uploader style="width:89vw; height:40vw;" v-model="fileList2" multiple :before-delete="beforeDel2" :after-read='afterRead2'>
                    <div :style="{'display':styledisplay2}" class="real_photo_btn">
                        <img src="../../assets/p1.png" />
                        <p>上传身份证背面</p>
                        <p>3M以内</p>
                    </div>
                </van-uploader>
            </div>
            <div class="real_title title_height margin_t">
                真实姓名
            </div>
            <div class="real_input">
                <input type="text" v-model="realNamefrom.name" @blur="nameValidator(realNamefrom.name)"  placeholder="请与身份证姓名保持一致">
            </div>
            <div class="real_msg">{{validator.name}}</div>
            <div class="real_title title_height margin_t">
                身份证号
            </div>
            <div class="real_input">
                <input type="text"  v-model="realNamefrom.idCardNum" @blur="idCardNumValidator(realNamefrom.idCardNum)" placeholder="请输入身份证号码">
            </div>
            <div class="real_msg">{{validator.idCardNum}}</div>
            <div class="real_title title_height margin_t">
                身份证有效期开始时间
            </div>
            <div class="real_input">
                <input type="text" v-model="realNamefrom.idCardStart" @click="showcalendar = true"   placeholder="请输入有效期如19980101">
            </div>
            <div class="real_msg">{{validator.idCardStart}}</div>
            <div class="real_title title_height margin_t">
                身份证有效期结束时间
            </div>
            <div class="real_border_none margin_t">
                <van-checkbox checked-color="#FF491F" @change="checkedHanlder" v-model="checked">长期有效</van-checkbox>
            </div>
            <div class="real_input">
                <input type="text" v-model="realNamefrom.idCardEnd" @click="showcalendar2 = true"  :disabled="idCardEndDisabled" placeholder="请输入有效期如20220101">
            </div>
            <div class="real_msg">{{validator.idCardEnd}}</div>
            <div class="">
                <div class="real_title title_height margin_t">
                    地址
                </div>
                <div class="real_input">
                    <input type="text" v-model="realNamefrom.add" @blur="addValidator(realNamefrom.add)" placeholder="请输入常驻地址信息">
                </div>
                <div class="real_msg">{{validator.add}}</div>
            </div>
            <div class="bottom_box">
                <div class="real_title title_height margin_t">
                    手机号
                </div>
                <div class="real_input">
                    <input type="text" v-model="realNamefrom.cellphone" @blur="addValidator(realNamefrom.cellphone)" placeholder="请输入手机号">
                </div>
                <div class="real_msg">{{validator.cellphone}}</div>
            </div>
        </div>
        <div class="real_bottom">
            <div style="padding: 4vw;">
                <van-button @click="bankHandler(realNamefrom)" style="font-size:4.8vw; height:13.33vw;" color="#FF491F" type="info"   round  block>提交</van-button>
            </div>
        </div>
        
        <van-popup v-model="showcalendar" position="bottom">
            <van-datetime-picker v-model="currentDate" type="date"
                @confirm = 'onconfirm' @cancel = "oncancel"
                title="选择年月日" :min-date="minDate" :max-date="maxDate"/>
        </van-popup>
        <van-popup v-model="showcalendar2" position="bottom">
            <van-datetime-picker v-model="currentDate2" type="date"
                @confirm = 'onconfirm2' @cancel = "oncancel"
                title="选择年月日" :min-date="minDate" :max-date="maxDate"/>
        </van-popup>
        
    </div>
</template>
<script>
import navCom from '@/component/nav'
import {postImages,postImages2,getMemberidcards,putMemberidcards,putRealname,getCardinfo,getFttuserUserId2}  from '@/api/api'
export default {
    name:'realName',
    components:{
        navCom
    },
    data() {
        return{
            showView:true,
            uid: weixin.getUserId(),
            styledisplay:'block',
            styledisplay2:'block',
            list:[],
            fileImg:null,
            fileList:[],
            fileList2:[],
            realNamefrom:{
                frontImg:'',
                backImg:'',
                name:'',
                idCardNum:'',
                idCardStart:'',
                idCardEnd:'',
                add:'',
                cellphone:'',
            },
            validator:{
                name:'',
                idCardNum:'',
                idCardStart:'',
                idCardEnd:'',
                add:'',
                cellphone:''
            },
            realNameId:'',
            state:'',
            showcalendar:false,
            showcalendar2:false,
            minDate:new Date(1949,0,1),
            maxDate:new Date(2050,10,1),
            currentDate:new Date(2022,0,17),
            currentDate2:new Date(2022,0,17),
            checked:false,
            idCardEndDisabled:false,
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            if(weixin.isAndroid()){
                window.JS_TROOPS.goBack()
            }else{
                this.$router.go(-1);
            }
        },
        //初始化
        init(){
            this.fileList = []
            this.fileList2 = []
            getFttuserUserId2().then(res=>{
                console.log("getFttuserUserId2",res);
                if(res.data.code == 1){
                    let cellphone = res.data.data.mobile
                    this.realNamefrom.cellphone=cellphone;
                }
            })
            getCardinfo().then(res=>{
                console.log("getCardinfo",res);
                if(res.data.code == 1){
                    // frontImg:'',
                    // backImg:'',
                    // name:'',
                    // idCardNum:'',
                    // idCardStart:'',
                    // idCardEnd:'',
                    // add:'',
                    // cellphone:'',
                    if(res.data.data.imgIdCardFront!=null){
                        this.fileList.push({
                        url:res.data.data.imgIdCardFront
                        })
                        this.styledisplay = 'none'
                        this.fileList2.push({
                            url:res.data.data.imgIdCardBack
                        })
                        this.styledisplay2 = 'none'
                    }
                  
                
                    this.realNamefrom.frontImg=res.data.data.imgIdCardFront
                    this.realNamefrom.backImg=res.data.data.imgIdCardBack
                    this.realNamefrom.name=res.data.data.name
                    this.realNamefrom.idCardNum=res.data.data.idCard
                    this.realNamefrom.idCardStart=res.data.data.IdCardStart
                    this.realNamefrom.idCardEnd=res.data.data.IdCardEnd
                    this.realNamefrom.add=res.data.data.addr
                    this.realNamefrom.cellphone=res.data.data.phone
                }
            })
            // getMemberidcards({userId:this.uid}).then(res=>{
            //     if(res.data.code == 200){
            //         let data = res.data.data
            //         this.realNameId = data.id
            //         this.state = data.state

            //         if(data.picUrl1 !==''){
            //             this.fileList.push({url:data.picUrl1})
            //             this.realNamefrom.frontImg = data.picUrl1
            //             this.styledisplay = 'none'

            //         }
            //         if(data.picUrl2 !==''){
            //             this.fileList2.push({url:data.picUrl2})
            //             this.realNamefrom.backImg = data.picUrl2
            //             this.styledisplay2 = 'none'
            //         }
            //         this.realNamefrom.name = data.idname
            //         this.realNamefrom.idCardNum = data.idcard
            //         this.realNamefrom.idCardStart = ''
            //         this.realNamefrom.idCardEnd = ''
            //         this.realNamefrom.add = data.address
            //         this.realNamefrom.idCardStart = data.startDate
            //         this.realNamefrom.idCardEnd = data.endDate
            //         this.realNamefrom.cellphone = data.cellphone

            //         if( this.state == 'pending'){
                        
            //         }else if( this.state == 'failure'){
            //             this.$dialog.alert({
            //                 message:'你的实名认证失败，请重新修改实名认证信息'
            //             })
            //         }else if(this.state == 'success'){
            //             //成功跳转绑定银行卡
            //             this.$dialog.alert({
            //                 message:'您已实名认证成功'
            //             })
            //         }
            //     }else {
            //         this.$dialog.alert({
            //             message:res.data.msg
            //         })
            //     }
            // })
        },
        //复选框
        checkedHanlder(val){
           
            if(val){
                this.idCardEndDisabled = true
                this.realNamefrom.idCardEnd = '长期'
            }else{
                this.idCardEndDisabled = false
                this.realNamefrom.idCardEnd = ''
            }
        },
        //日历
        formatDateStr(val){
            let str = new Date(val)
            let year = str.getFullYear()
            let month = str.getMonth()+1 < 10 ? '0'+(str.getMonth()+1) : str.getMonth()+1
            let date = str.getDate() <10 ? '0'+str.getDate() : str.getDate()
            return ''+year+month+date
        },
        onconfirm(val){
            this.realNamefrom.idCardStart = this.formatDateStr(val)
            this.showcalendar = false
        },
        onconfirm2(val){
            this.realNamefrom.idCardEnd = this.formatDateStr(val)
            this.showcalendar2 = false
        },
        oncancel(){
            this.showcalendar = false
            this.showcalendar2 = false
        },
        //姓名验证
        nameValidator(val){
            if(val=='' || val.trim().length==0){
                this.validator.name = '姓名不能为空'
                return false
            }else {
                this.validator.name = ''
                return true
            }
        },
        //手机号验证
        cellphoneValidator(val){
            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(val=='' || val.trim().length==0 ){
                this.validator.cellphone = '手机号不能为空'
                return false
            }else if(!reg.test(val)){
                this.validator.cellphone = '手机号不正确'
                return false
            }else {
                this.validator.cellphone = ''
                return true
            }
        },
        //身份证验证
        idCardNumValidator(val){
            let idCardreg = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
            if(val=='' || val.trim().length==0){
                this.validator.idCardNum = '身份证号不能为空'
                return false
            }else if(!idCardreg.test(val)){
                this.validator.idCardNum = '身份证不正确'
                return false
            } else {
                this.validator.idCardNum = ''
                return true
            }
        },
        //身份证开始
        idCardStartValidator(val){
            let reg = /^[0-9]{8}$/;
            if(val=='' || val.trim().length==0){
                this.validator.idCardStart = '身份证有效期开始不能为空'
                return false
            }else if(!reg.test(val)){
                this.validator.idCardStart = '身份证有效期不正确'
                return false
            }else {
                this.validator.idCardStart = ''
                return true
            }
        },
        //身份证结束
        idCardEndValidator(val){
            
            if(val=='' || val.trim().length==0){
                this.validator.idCardEnd = '身份证有效期结束不能为空'
                return false
            }else{
                this.validator.idCardEnd = ''
                return true
            }
        },
        //地址
        addValidator(val){
            if(val=='' || val.trim().length==0){
                this.validator.add = '地址不能为空'
                return false
            }else {
                this.validator.add = ''
                return true
            }
        },
       
        //提交实名认证
        bankHandler(val){
            
            if(!this.nameValidator(val.name)){
                return false
            }else if(!this.idCardNumValidator(val.idCardNum)){
                return false
            }else if(!this.idCardStartValidator(val.idCardStart)){
                return false
            }else if(!this.idCardEndValidator(val.idCardEnd)){
                return false
            }else if(!this.addValidator(val.add)){
                return false
            }

            if(val.frontImg == '' || val.backImg == ''){
                this.$dialog.alert({
                    message:'请上传身份证正反面'
                })
                return false
            }

            let data = {
                // id:this.realNameId,
                imgIdCardFront:val.frontImg,
                imgIdCardBack:val.backImg,
                name:val.name,
                idCard:val.idCardNum,
                addr:val.add,
                phone:val.cellphone,
                IdCardStart:val.idCardStart,
                IdCardEnd:val.idCardEnd
            }
            putRealname(data).then(res=>{
                console.log("putRealname",res);
                if(res.data.code == 1){
                    this.$dialog.alert({
                        message:res.data.msg
                    }).then(()=>{
                        this.$router.go(-1)
                     })
                  
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
            
        },
        //图片上传
        afterRead(file){
            if(this.fileList.length > 0){
                this.styledisplay = 'none'
            }
           
            let that = this
            let funBack = function(file){
                var fd = new FormData()
                fd.append('file',file)
                postImages2(fd).then(res=>{
                    console.log(res);
                    that.realNamefrom.frontImg = res.data.data.fullurl
                    that.styledisplay = 'none'
                    that.$forceUpdate()
                })
            }
            weixin.uploadIF(file,funBack)
            return false

        },
        afterRead2(file){
            if(this.fileList2.length > 0){
                this.styledisplay2 = 'none'
            }
            let that = this
            let funBack = function(file){
                var fd = new FormData()
                fd.append('file',file)
                fd.append('albumId','10001')
                postImages2(fd).then(res=>{
                    console.log(res);
                    that.realNamefrom.backImg = res.data.data.fullurl
                    that.styledisplay2 = 'none'
                    that.$forceUpdate()
                })
            }
            weixin.uploadIF(file,funBack)
            return false
        },
        //图片删除
        beforeDel(file){
            if(this.fileList.length > 0){
                this.styledisplay = 'block'
            }else{
                this.styledisplay = 'none'
            }
            return true
        },
        beforeDel2(file){
            if(this.fileList2.length > 0){
                this.styledisplay2 = 'block'
            }else{
                this.styledisplay2 = 'none'
            }
            return true
        }
        
    }
}
</script>
<style scoped>
    body{
        background-color: white;
    }
p {padding:0; margin:0;}
.real_box {margin:0 5.3vw; color:#222;}
.real_bottom { position:fixed; left:0; bottom:0; width:100%;  background: #fff;}
.real_text {font-size:3.46vw; margin-top:4vw;}
.real_title {font-size:4vw;}

.real_ps p {font-size:4vw; color:#b0b0b0;}
.real_border_none {width:auto; height:14.66vw;}
.real_input {width:auto; border:1px solid #b0b0b0; border-radius: 2vw; height:14.66vw;}
.real_input input {width:90%; font-size:5.3vw; border:none; margin-left:2vw; height:13vw;}
.title_height {height:8vw; line-height:8vw;}
.margin_t {margin-top:4vw;}
.bottom_box {margin-bottom:35vw;}
.real_ps {width:auto; border:1px solid #b0b0b0; border-radius: 2vw; height:40vw; text-align: center; }
.real_photo_btn {width:89vw; height:40vw;}
.real_photo_btn img {width:11.73vw; height: 9.6vw; margin-top:8vw;}
.real_msg {margin-top:2.6vw; color:#f00;}

</style>
<style>
.van-uploader__preview-image {width: 89vw !important; height:40vw !important;}
.van-image__img {width: 89vw!important; height: 40vw!important;}
</style>
